<template>
  <div>
    <el-dialog

      :title="formData.id ? '编辑员工' : '添加员工'"
      :visible="visible"
      size="small"
      width="500px"
      @close="$emit('update:visible',false)"
    >
      <el-form
        ref="formRef"
        label-width="140px"
        :model="formData"
        :rules="rules"
      >
        <el-form-item label="员工姓名" prop="name">
          <el-input v-model="formData.name" placeholder="请填写员工姓名" />
        </el-form-item>

        <el-form-item label="登录账号" prop="userName">
          <el-input v-model="formData.userName" placeholder="请填写登录账号" />
        </el-form-item>

        <el-form-item label="联系方式" prop="phonenumber">
          <el-input v-model="formData.phonenumber" placeholder="请填写联系方式" />
        </el-form-item>

        <el-form-item label="默认密码：123456" style="margin-left: 60px;" />

        <el-form-item label="分配角色" prop="roleName">
          <el-select v-model="formData.roleName" placeholder="请选择分配角色" style="width:100%">
            <el-option label="基础数据管理" value="1" />
            <el-option label="行车管理" value="2" />
            <el-option label="员工及系统管理" value="3" />
            <el-option label="黑马测试" value="4" />
            <el-option label="测试" value="5" />
            <el-option label="456" value="6" />
            <el-option label="123123" value="7" />
          </el-select>
        </el-form-item>

        <el-form-item label="员工状态" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio label="禁用" />
            <el-radio label="启用" />
          </el-radio-group>
        </el-form-item>
      </el-form>

      <el-row type="flex" justify="end">
        <el-button @click="visible=false">取消</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </el-row>

    </el-dialog>
  </div>
</template>

<script>
import { addEmpAPI, delEmpAPI, editEmpAPI, getEmpDetailAPI } from '@/api/employee'
export default {
  props: {
    visible: Boolean
  },
  data() {
    return {
      data: [],
      formData: {
        name: '',
        userName: '',
        roleId: 0,
        roleName: '',
        password: '',
        status: 0,
        phonenumber: ''
      },
      rules: {
        name: [{ required: true, message: '请输入员工姓名', trigger: 'blur' }],
        userName: [{ required: true, message: '请输入登录账号', trigger: 'blur' }],
        phonenumber: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
        roleName: [{ required: true, message: '请选择分配角色', trigger: 'blur' }],
        status: [{ required: true, message: '请选择员工状态', trigger: 'blur' }]

      }
    }
  },
  watch: {
    visible(newValue) {
      if (!newValue) {
        this.$refs.formRef.resetFields()
        this.formData = {
          name: '',
          userName: '',
          roleId: 0,
          roleName: '',
          password: '',
          status: 0,
          phonenumber: ''
        }
      }
    }
  },
  methods: {
    async  onDel(id) {
      await this.$confirm('确认删除吗')
      await delEmpAPI(id)
      this.$message.success('删除成功')

      this.$emit('onSuccess')
    },
    // 2、子组件内定义一个方法
    async onGetDetail(id) {
      const res = await getEmpDetailAPI(id)
      // 回填数据
      this.formData = {
        name: res.data.name,
        userName: res.data.userName,
        roleName: res.data.roleName,
        phonenumber: res.data.phonenumber,
        status: res.data.status,
        id: res.data.id
      }
    },
    async onSubmit() {
      await this.$refs.formRef.validate()
      if (!this.formData.id) {
        await addEmpAPI(this.formData)
      } else {
        await editEmpAPI(this.formData)
      }

      this.$message.success(!this.formData.id ? '添加成功' : '编辑成功')
      this.$emit('update:visible', false)
      this.$emit('onSuccess')
    }
  }
}
</script>

<style>

</style>
